@charset "utf-8";
@bgColor: #f2f2f2;
@pressBgColor: #CC5500;
@black: #000000;
@white: #ffffff;
@gray: #DCDCDC; //灰色
@grayText: #8e8e93; //#C7C7CB;//#8D8D93;//#787878;
@orange: #FF8F3B;
@orangeText: #FFA700; //公司的橙色字体
@red: #ff0000;
@placeholderColor: #cccbcf; //输入框提示文字的颜色
@maxwidth: 11.2rem;
@globalFamily: "Microsoft Yahei",
"Hiragino Sans GB",
"Helvetica Neue",
Helvetica,
tahoma,
arial,
"WenQuanYi Micro Hei",
Verdana,
sans-serif,
"\5B8B\4F53"; //'Microsoft YaHei', Arial, Helvetica, sans-serif;//"微软雅黑","黑体","华文黑体";
@blue: #1ca3e5;
@blueText: #1ca3e5; //公司的蓝色字体
@padding: 30;
@border: 1px solid @gray; //灰色细边框
@errorColor: #DD0F0F;
.userselect(@v: none) {
  -webkit-user-select: @v;
}

.align(@pos: center) {
  text-align: @pos;
}

.cursor(@v: pointer) {
  cursor: @v;
}

.float(@v: left) {
  float: @v;
}

.fl {
  .float();
}

.fr {
  .float(right);
}

// Animations
// --------------------------------------------------
.animation(@animation) {
  -webkit-animation: @animation;
  animation: @animation;
}

.animation-name(@name) {
  -webkit-animation-name: @name;
  animation-name: @name;
}

.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
  animation-duration: @duration;
}

.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
  animation-direction: @direction;
}

.animation-timing-function(@function) {
  -webkit-animation-timing-function: @function;
  animation-timing-function: @function;
}

// Flex
// --------------------------------------------------
.flex() {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.flex-td(@v: 1) {
  -webkit-box-flex: @v;
  -webkit-flex: @v;
  -ms-flex: @v;
  flex: @v;
}

.flex-wrap(@fw) when (@fw =nowrap) {
  -webkit-box-lines: single;
  -moz-box-lines: single;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.flex-wrap(@fw) when (@fw =wrap) {
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex-wrap(@fw) when not (@fw =wrap) and not (@fw =nowrap) {
  -webkit-flex-wrap: @fw;
  -ms-flex-wrap: @fw;
  flex-wrap: @fw;
}

.flex-shrink(@fs) {
  -webkit-flex-shrink: @fs;
  -ms-flex: 0 @fs auto;
  flex-shrink: @fs;
}

.justify-content(@jc) when (@jc =flex-start) {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

.justify-content(@jc) when (@jc =flex-end) {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

.justify-content(@jc) when (@jc =space-between) {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.justify-content(@jc) when not (@jc =flex-start) and not (@jc =flex-end) and not (@jc =space-between) {
  -webkit-box-pack: @jc;
  -ms-flex-pack: @jc;
  -webkit-justify-content: @jc;
  justify-content: @jc;
}

.align-items(@ai) when (@ai =flex-start) {
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

.align-items(@ai) when (@ai =flex-end) {
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

.align-items(@ai) when not (@ai =flex-start) and not (@ai =flex-end) {
  -webkit-box-align: @ai;
  -ms-flex-align: @ai;
  -webkit-align-items: @ai;
  align-items: @ai;
}

.align-content(@ai) {
  -ms-flex-line-pack: @ai;
  -webkit-align-content: @ai;
  align-content: @ai;
}

.align-self(@as) {
  -ms-flex-item-align: @as;
  -webkit-align-self: @as;
  align-self: @as;
}

.flex-direction(@d) {
  -webkit-flex-direction: @d;
  -ms-flex-direction: @d;
  flex-direction: @d;
}

// Transforms
// --------------------------------------------------
.transform(@transform) {
  -webkit-transform: @transform;
  -ms-transform: @transform;
  transform: @transform;
}

.transform-origin(@x, @y) {
  -webkit-transform-origin: @x @y;
  -ms-transform-origin: @x @y;
  transform-origin: @x @y;
}

// Transformations
.scale(@ratio) {
  -webkit-transform: scale(@ratio);
  -ms-transform: scale(@ratio);
  transform: scale(@ratio);
}

.scaleXY(@ratioX, @ratioY) {
  -webkit-transform: scale(@ratioX, @ratioY);
  -ms-transform: scale(@ratioX, @ratioY);
  transform: scale(@ratioX, @ratioY);
}

.scaleX(@ratio) {
  -webkit-transform: scaleX(@ratio);
  -ms-transform: scaleX(@ratio);
  transform: scaleX(@ratio);
}

.scaleY(@ratio) {
  -webkit-transform: scaleY(@ratio);
  -ms-transform: scaleY(@ratio);
  transform: scaleY(@ratio);
}

.skew(@x, @y) {
  -webkit-transform: skewX(@x) skewY(@y);
  -ms-transform: skewX(@x) skewY(@y);
  transform: skewX(@x) skewY(@y);
}

.translate(@x, @y) {
  -webkit-transform: translate(@x, @y);
  -ms-transform: translate(@x, @y);
  transform: translate(@x, @y);
}

.translate3d(@x, @y, @z) {
  -webkit-transform: translate3d(@x, @y, @z);
  transform: translate3d(@x, @y, @z);
}

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
  -ms-transform: rotate(@degrees);
  transform: rotate(@degrees);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
  -ms-transform: rotateX(@degrees);
  transform: rotateX(@degrees);
}

.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
  -ms-transform: rotateY(@degrees);
  transform: rotateY(@degrees);
}


// Transitions
// --------------------------------------------------
.transition(@transition) {
  -webkit-transition: @transition;
  -moz-transition: @transition;
  transition: @transition;
}

.transition-property(@property) {
  -webkit-transition-property: @property;
  -moz-transition-property: @property;
  transition-property: @property;
}

.transition-duration(@duration) {
  -webkit-transition-duration: @duration;
  -moz-transition-duration: @duration;
  transition-duration: @duration;
}

.transition-timing-function(@function) {
  -webkit-transition-timing-function: @function;
  -moz-transition-timing-function: @function;
  transition-timing-function: @function;
}

.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
  -moz-transition: -moz-transform @transition;
  transition: transform @transition;
}

.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
  box-shadow: @shadow;
}

.we-cell-border(@left, @top, @bottom, @width) {
  content: " ";
  position: absolute;
  top: @top;
  bottom: @bottom;
  width: @width;
  height: 1/@unit;
  border-top: 1/@unit solid #DCDCDC;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  -ms-transform: scaleY(0.5);
  transform: scaleY(0.5);
  left: @left;
}